<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>SWU Student Restaurant</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
  <link href="assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
  <link href="assets/css/style.css" rel="stylesheet">

</head>
<style>
.login .form-basic {
  width: 100%;
}
.login .form-basic .form-group {
  padding-bottom: 8px;
}
.login .form-basic .validate {
  display: none;
  color: red;
  margin: 0 0 15px 0;
  font-weight: 400;
  font-size: 13px;
}
.login .form-basic .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}
.login .form-basic .error-message br + br {
  margin-top: 25px;
}
.login .form-basic .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}
.login .form-basic .loading {
  display: none;
  text-align: center;
  padding: 15px;
}
.login .form-basic .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #cda45e;
  border-top-color: #1a1814;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}
.login .form-basic input, .login .form-basic textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  background: #0c0b09;
  border-color: #625b4b;
  color: white;
}
.login .form-basic input::-moz-placeholder, .login .form-basic textarea::-moz-placeholder {
  color: #a49b89;
}
.login .form-basic input::placeholder, .login .form-basic textarea::placeholder {
  color: #a49b89;
}
.login .form-basic input:focus, .login .form-basic textarea:focus {
  border-color: #cda45e;
}
.login .form-basic input {
  height: 44px;
}
.login .form-basic textarea {
  padding: 10px 12px;
}
.login .form-basic button[type=submit] {
  background: #cda45e;
  border: 0;
  padding: 10px 35px;
  color: #fff;
  transition: 0.4s;
  border-radius: 50px;
}
.login .form-basic button[type=submit]:hover {
  background: #d3af71;
}
</style>

<body>

  <div id="topbar" class="d-flex align-items-center fixed-top">
    <div class="container d-flex justify-content-center justify-content-md-between">
      <div class="contact-info d-flex align-items-center">
        <i class="bi bi-phone d-flex align-items-center"><span>18622332179@163.com</span></i>
        <i class="bi bi-clock d-flex align-items-center ms-4"><span>2021/12/22</span></i>
      </div>
    </div>
  </div>

  <header id="header" class="fixed-top d-flex align-items-cente">
    <div class="container-fluid container-xl d-flex align-items-center justify-content-lg-between">
      <h1 class="logo me-auto me-lg-0">西南大学美食推荐系统</h1>
    </div>
  </header>

  <main id="main">
    <section class="breadcrumbs">
      <div class="container">

        <div class="d-flex justify-content-between align-items-center">
          <h2>登录</h2>
          <ol>
            <li><a href="index.html">首页</a></li>
            <li>登录</li>
            <li><a href="register.html">注册</a></li>
          </ol>
        </div>
      </div>
    </section>

    <!-- =======登录 ======= -->
    <section class="login">
      <div class="container text-center" data-aos="fade-up">
        <form class="form-basic" style="margin:0 auto;" action="./login" method="POST" role="form" data-aos="fade-up" data-aos-delay="100">
          <div class="row">
            <div class="col-lg-4 col-md-6 form-group">
              <input type="text" class="form-control" name="user" id="user" placeholder="用户名" data-msg="请输入合法用户名">
              <div class="validate"></div>
            </div>
            <div class="col-lg-4 col-md-6 form-group mt-3 mt-md-0">
              <input type="password" class="form-control" name="password" id="password" placeholder="密码" data-msg="请输入正确密码">
              <div class="validate"></div>
            </div>
            <div class="col-lg-4 col-md-6 form-group">
              <img src="./validateCode" name="image" >
              <div class="validate"></div>
            </div>
            <div class="col-lg-4 col-md-6 form-group mt-3 mt-md-0">
              <input type="text" class="form-control" name="code" id="code" placeholder="验证码" data-msg="请输入图片验证码">
              <div class="validate"></div>
            </div>
          </div>
          <div class="text-center"><button type="submit">登录</button></div>
        </form>
      </div>
    </section>
  </main>

  <footer id="footer">
    <div class="container">
      <div class="credits">
        Made by 李博钊
      </div>
      <div class="credits">
        Template reference to <a href="https://bootstrapmade.com/">BootstrapMade</a>
      </div>
    </div>
  </footer>

  <div id="preloader"></div>
  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>


  <script src="assets/js/main.js"></script>

</body>
</html>